import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_lyric/lyrics_reader.dart';
import 'package:flutter_lyric/lyrics_reader_model.dart';
import 'package:get/get.dart';

import '../../../../../lib_baseview/widget/draggable/draggable_positioned_mixin.dart';
import '../../../../../lib_runtime/logger.dart';
import '../model/room_music_center_controller.dart';
import '../util/agora_music_util.dart';

class RoomLyricWidget extends StatefulWidget {
  const RoomLyricWidget({super.key});

  @override
  State<RoomLyricWidget> createState() => _RoomLyricWidgetState();
}

class _RoomLyricWidgetState extends State<RoomLyricWidget>
    with DraggablePositionedMixin {
  var playProgress = 0;

  bool useEnhancedLrc = false;
  LyricsReaderModel? lyricModel;

  var lyricUI = _LyricUI();
  var playing = true;

  @override
  void initState() {
    super.initState();
    defaultPosition = Offset((Get.width - 300) / 2, (Get.height - 100) / 2);
  }

  RoomMusicCenterController? get centerController {
    try {
      RoomMusicCenterController controller =
          Get.find<RoomMusicCenterController>();
      return controller;
    } catch (e) {}
    return null;
  }

  @override
  Widget build(BuildContext context) {
    if (centerController == null) return const SizedBox.shrink();
    return root;
  }

  Widget get lyricWidget => LyricsReader(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        model: lyricModel,
        position: playProgress,
        lyricUi: lyricUI,
        playing: playing,
        size: const Size(300, 100),
        emptyBuilder: () => Center(
          child: Text(
            "No lyrics",
            style: lyricUI.getOtherMainTextStyle(),
          ),
        ),
      );

  Widget get lyricContainer => ClipRRect(
        borderRadius: BorderRadius.circular(0),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: Container(
            width: 300,
            height: 124,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.white.withOpacity(0.1)),
              borderRadius: BorderRadius.circular(12),
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  const Color(0xFF5B30D3).withOpacity(0.6),
                  const Color(0xFF4724A5).withOpacity(0.6)
                ],
              ),
            ),
            child: Stack(
              alignment: AlignmentDirectional.topEnd,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  child: IgnorePointer(child: lyricWidget),
                ),
                GestureDetector(
                  onTap: () => centerController?.toggleLyric(),
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Icon(
                      size: 20,
                      Icons.close,
                      color: Colors.white.withOpacity(0.8),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );

  Widget get root => GetBuilder<RoomMusicCenterController>(
      id: UpdateIds.lyricChange,
      builder: (controller) {
        RLog.d(
            'Build lyric with showing: ${controller.lyricShowing}, lyricEmpty: ${!controller.curLyric.isNotEmpty}, position: ${controller.positionMs}');
        if (controller.lyricShowing) {
          lyricModel = LyricsModelBuilder.create()
              .bindLyricToMain(controller.curLyric)
              .getModel();
          playProgress = controller.positionMs;
          return draggable;
        } else {
          return const SizedBox();
        }
      });

  @override
  Widget get draggableChild => lyricContainer;
}

class _LyricUI extends UINetease {
  _LyricUI()
      : super(
          defaultSize: 16,
          otherMainSize: 14,
          lineGap: 12,
        );

  @override
  TextStyle getOtherMainTextStyle() =>
      TextStyle(color: Colors.white.withOpacity(0.5), fontSize: otherMainSize);

  @override
  TextStyle getPlayingMainTextStyle() => TextStyle(
        color: Colors.white,
        fontSize: defaultSize,
      );
}
